<template>
        <div class="jx-big">
            <div>
                <div class="jx-info">
                    <h3 class="fl">消息通知</h3>
                   <div class="button-style fr" @click="notify">发布通知</div>
                </div>
                <div class='table'>
                    <table cellspacing="0" cellpadding='0' class='tab' style='position:relative'>
                        <tr> 
                            <th width='500'>消息名称</th>
                            <th width='100'>发布时间 </th>
                            <th width='250'>操作 </th>
                        </tr>
                        <tr  @click='cheek(item)' v-for='(item ,index) in tableData' :key="index"> 
                            <td style="width:500px">
                                <div :class="item.down? 'td-content' : 'td-contentd'">
                                    {{item.count}}
                                    <div  class='classNamelist' >
                                        <span class="className" v-for='(item ,index) in item.ClassList' :key="index">{{item.name}}</span>
                                    </div>
                                </div>
                            </td>
                            <td>{{item.name}} </td>
                            <td style='position:relative'>
                                <span class='handle' @click.stop='repeat(item.id, item.count)'>修改</span>
                                <span class='delete' @click.stop="deletFn(item.id)" >删除</span>
                            </td>
                            <i :class="item.down? 'ico' : 'icon'" class='el-icon-arrow-right' ></i>
                        </tr>
                    </table>
                </div>
                 <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                 ></el-pagination>
            </div>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="550px" >
                <el-form ref="form" :model="form">
                    <el-form-item label="选择班级 ：" style="width:300px;">
                        <el-select v-model="form.class" multiple placeholder="请选择班级">
                            <el-option
                            v-for="item in form.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>                    
                    <el-form-item label="消息内容 ：">
                        <el-input type="textarea" v-model="form.content" @input="dataInput"> </el-input>
                        <p style=" position:absolute;  right: 33px; bottom: 3px;">{{form.num}}/150</p>
                    </el-form-item>
                    <el-form-item  style="text-align:center">
                        <div class="button-style save" @click="save()">保 存</div>
                    </el-form-item>
                </el-form>
         </el-dialog>
     </div>
    

</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        components: {
            NotificationNav
        },
        data () {
            return {
                form:{
                  num:0,//剩余字数
                  class:[],
                  content:'',
                  options: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }]
                },
                dialogTitle:'',//标题
                dialogFormVisible:false,
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: [{
                    id: '12987122',
                    down:true,
                    name: '王小0虎',
                    amount1: '234',
                    amount2: '3.2',
                    ClassList:[
                        { name:'大数据发班据发班级'},
                        { name:'大数据发班据发班级'},
                        { name:'大数据发班据班级'},
                        { name:'大数据发班据发班级'},
                    ],
                    count:'代码的关键点在于border-collapse:collapse; 和 border:solid 1px Black;。对于padding的定义大家都比较熟悉了，这里主要讲一下的是border-collapse中的collapse和separate值，定义为collapse时，他们的边框会重叠在一起，定义为separate时单元格边框之间会有间隙。不定义时默认为separate。 separate情况下的效 '
                    },
                    {
                    id: '12987122',
                    down:true,
                    name: '王小0虎',
                    amount1: '234',
                     ClassList:[
                        { name:'大数据发班据发班级'},
                        { name:'大数据发班据发班级'},
                    ],
                    amount2: '3.2',
                    count:'大数据发班据发班级大数据发班据发班级大数据发班据发班级大数据发班据发班级'
                    }
                ]
            }
        },
        created () {
            
        },
        methods: {
             //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                //this.init()
            },
            //发布通知
            notify(){           
                this.dialogTitle='发布通知'
                this.dialogFormVisible=true

            },
            //修改
            repeat(){
               console.log('修改消息')
               this.dialogFormVisible=true
               this.dialogTitle='修改通知'
            },
            //删除消息
            deletFn(){
               console.log('删除消息')
            },
            //展开
            cheek(item){     
              item.down =!item.down
            },
            //保存
            save(){
                console.log(this.form.class)
                this.dialogFormVisible=false
            },
            //字数
            dataInput(){
                var txtVal = this.form.num.length;
                this.form.num.length = 150 - txtVal
            },
            
        },
    }
</script>
<style scoped>
   .el-textarea{
       width: 64%;
       height: 160px;
   }
   .el-select>>>.el-input__inner{
       width: 200px;
   }
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 19px;
        .jx-info{
            overflow: hidden;
            .jx-info>h3{
                height: 32px;
                line-height: 32px;
                font-size: $fs16
            }
        }
        .table{
            clear: both;
            margin: 40px 0;
            .handle{
                position: absolute;
                left: 50px;
                z-index: 200;
                display: inline-block;
                width: 50px;
                height: 30px;
                margin-top: -5px;
                color: $btn-blue;
                cursor: pointer;
            }
            .delete{
                position: absolute;
                left: 110px;
                z-index: 200;
                display: inline-block;
                width: 50px;
                height: 30px;
                margin-top: -5px;
                color: $btn-blue;
                cursor: pointer;
            }
                .icon{
                position:absolute;
                right:33px;
                transform:rotate(90deg);
                transition: transform .3s;
                line-height:30px;
                display:inline-block;
                margin-top: 14px;
                cursor: pointer;
            }
            .ico{
                position:absolute;
                right:33px;
                line-height:30px;
                display:inline-block;
                transform:rotate(0deg);
                transition: transform .3s;
                margin-top: 20px;
                cursor: pointer;
            }
            .tab tr th{
                border-bottom:1px solid $border-gray;
                height: 30px;
                line-height: 30px;
            }
            .tab td{
                width:200px;
            }
            .tab tr td{
                border-bottom:1px solid $border-gray;
                text-align:center;
            }
                .td-content{
                display: block;
                height: 50px;
                overflow: hidden;
                transition: height .3s;
                line-height:50px;
                padding:10px 0;
                }
            .td-contentd{
                height: auto;
                transition: height .3s;
                line-height:30px;
                padding: 10px 0;
                .classNamelist{
                    text-align: left;
                    .className{
                        padding: 0px 7px;
                        border: 1px solid $gray6a;
                        border-radius: 15px;
                        color: #727272;
                        margin:2px  2px;
                        display: inline-block
                    }
                }
                    
            }
        }
}
</style>